<template>
  <div class="main_box">
    <el-row class="header-row">
      <el-col>
        <div class="search_wrap">
          <el-form :inline="true" :model="filters" class="demo-form-inline" ref="searchForm">
            <el-form-item prop="classifyName">
              <el-input v-model="filters.classifyName" placeholder="分类名称"></el-input>
            </el-form-item>
            <el-form-item prop="classifyCode">
              <el-input v-model="filters.classifyCode" placeholder="分类编号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="listData">查询</el-button>
              <el-button icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col>
        <div class="opration_wrap">
          <el-tooltip content="刷新" placement="top">
            <el-button circle icon="el-icon-refresh-right" @click="reload" size="mini"></el-button>
          </el-tooltip>
          <el-button type="primary" plain icon="fa fa-plus" v-has="permissionAdd" @click="handleClickAdd()" size="mini"> 新增</el-button>
        </div>
      </el-col>
    </el-row>

    <el-row ref="tableRow">
      <!-- 列表 -->
      <tree-table
          :key='tableKey'
          :columns="columns"
          :data="list"
          :eval-func="func"
          :eval-args="args"
          :expand-all="expandAll"
          :height="maxHeight + 40" border>
        <el-table-column width="180px" align="center" label="编号">
          <template slot-scope="scope">
            <span>{{scope.row.classifyCode}}</span>
          </template>
        </el-table-column>
        <el-table-column width="180px" align="center" label="排序(正序)">
          <template slot-scope="scope">
            <span>{{scope.row.sort}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column width="250px" align="center" label="负责人名称">
          <template slot-scope="scope">
            <span>{{scope.row.leadMemberName}}</span>
          </template>
        </el-table-column>
        <el-table-column width="100px" label="上级分类">
          <template slot-scope="scope">
            <span class="">{{scope.row.parentClassifyName}}</span>
          </template>
        </el-table-column>-->
        <el-table-column min-width="180px" align="center" label="备注">
          <template slot-scope="scope">
            <span>{{scope.row.remark}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="400px" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <div class="operate-box">
              <el-button
                type="text" size="mini" icon="el-icon-document-add"
                @click="handleClickAdd(scope.row)"  v-if="scope.row.level === 1">新增下级分类</el-button>
              <el-button
                type="text" size="mini" icon="el-icon-edit"
                @click="handleClickEditor(scope.row)">编辑</el-button>
              <el-button
                type="text" size="mini" icon="el-icon-delete"
                @click="handleClickDelete(scope.row)" >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </tree-table>
    </el-row>
  </div>

</template>
<script>
import * as message from '@/constants/message';
import treeToArray from '@/utils/customEval';
import treeTable from '@/components/TreeTable';
import AppointItemApi from "@/api/appoint/appointItem";

export default {
  name:'ItemClassifyManagement',
  inject: ['reload'], //注入局部刷新
  data () {
    return {
      tableKey: 0,
      total: null,
      func: treeToArray,
      args: [],
      list: {},
      list2: undefined,
      expandAll: false,
      columns: [
        {
          text: '分类名称',
          value: 'classifyName',
          width: 400
        }
      ],
      filters: {
        classifyName: '',
        classifyCode: ''
      },
      maxHeight: 500,
      permissionAdd: 'SYSTEM_MANAGER_APPOINT_ITEM_CLASSIFY_LIST_ADD',
      permissionCheck: 'SYSTEM_MANAGER_APPOINT_ITEM_CLASSIFY_LIST_SEE',
      permissionEdit:'SYSTEM_MANAGER_APPOINT_ITEM_CLASSIFY_LIST_EDIT',
      permissionUpStatus:'SYSTEM_MANAGER_APPOINT_ITEM_CLASSIFY_LIST_DELETE'
    }
  },
  components: {
    treeTable
  },
  watch:{
    //to去哪，from从哪来
    $route(to,from){
          if(from.path =='/appoint/classifyEdit' || from.path=='/appoint/classifyAdd'){
            this.listData();
          }
    }
  },
  created () {
    this.init();
    window.addEventListener("keydown", this.keyDown);
  },
  activated() {
    if (this.$route.meta.keepAlive){
      this.listData();
    }
  },
  destroyed(){
     window.removeEventListener("keydown", this.keyDown, false);
  },
  methods: {
    init(){
      let _this = this
      _this.listData();
      _this.getTableHeight();
    },
    keyDown(e) {
      //如果是回车则执行查询方法
      if (e.keyCode == 13) {
        this.listData();
      }
    },

    getTableHeight(){
      this.$nextTick(function () {
        this.maxHeight = window.innerHeight - this.$refs.tableRow.$el.offsetTop - 50;
        window.onresize = () => {
          this.maxHeight = window.innerHeight - this.$refs.tableRow.$el.offsetTop - 50;
        }
      })
    },
    resetForm(){
      this.$refs.searchForm.resetFields();
      this.listData();
    },
    formatState (row, column, cellValue) {
      if (cellValue === -1) {
        return '删除'
      } else if (cellValue === 0) {
        return '禁用'
      } else if (cellValue === 1) {
        return '启用'
      } else if (cellValue == 2) {
        return '待审核'
      }
    },
    handleClickEditor (row) {
      let _this = this
      _this.$router.push({
        path: '/appoint/classifyEdit',
        query: { id: row.classifyId }
      })
    },
    handleClickDelete (val) {
      let _this = this
      _this
        .$confirm(message.MSG_CONFIRM_DELETE, message.TITLE_PROMPT, {})
        .then(() => {
          AppointItemApi.deleteItemClassify({
              classifyId: val.classifyId,
              state: -1
            })
            .then(res => {
              _this.listData()
            })
        })
    },
    handleClickAdd (row) {
      let _this = this
      if (row){
        _this.$router.push({
          path: '/appoint/classifyAdd',
          query: { id: row.classifyId,name: row.classifyName }
        })
      }else{
        _this.$router.push({
          path: '/appoint/classifyAdd',
          query: { id: 0,name: '无' }
        })
      }
    },
    listData() {
      let _this = this
      let cond = {
        classifyName: _this.filters.classifyName,
        classifyCode: _this.filters.classifyCode
      }
      AppointItemApi.listItemClassify(cond)
        .then(res => {
          _this.list = res.data
        })
        .catch(error => {
          console.error(error)
        })
    }
  },
}
</script>
<style lang="scss" src="@/assets/css/views/content.scss" scope>
</style>
<style scoped>
.operate-box >button:hover{
  border: none;
  background-color: #F5F7FA;
}
</style>
